<template>

    <el-container style="padding: 10px" direction="vertical">


        <el-container>
            <el-button @click.prevent="fetchTaskList">获取所有任务</el-button>
            <el-button @click.prevent="createTask">添加定时任务</el-button>

        </el-container>


        <el-table
                style="margin-top: 10px"
                v-loading="false"
                :data="taskList"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
        >
            <el-table-column align="center" label="序号" width="95">
                <template slot-scope="scope">
                    {{ scope.$index+1 }}
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template slot-scope="scope">
                    {{ scope.row.desc }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.timestamp }}</span>
                </template>
            </el-table-column>

            <el-table-column class-name="status-col" label="状态" width="150" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status|statusText }}
                    </el-tag>

                </template>
            </el-table-column>
        </el-table>

    </el-container>


</template>

<script>


    import {createTask, fetchTaskList} from "@/api/taskApi";

    export default {
        name: "QuartzBoard",
        data() {
            return {
                taskList: []
            }
        },
        filters: {
            statusFilter(status) {
                const statusMap = ['danger', 'success'];
                return statusMap[status]
            },
            statusText(status) {
                const statusMap = ['停止', '运行'];
                return statusMap[status]
            }
        },
        methods: {


            fetchTaskList() {
                fetchTaskList()
                    .then(data => {
                        this.taskList = data;
                    });

            },

            createTask() {
                createTask()
                    .then(data => {
                        console.log(data);
                    })
            }


        }
    }
</script>

<style scoped>

</style>
